<!-- 复制到收藏夹 -->
<template>
	<view>
		<u-popup :show="show" @close="show=false" bgColor="transparent" >
			<view class="box">
				<view class="title">复制到收藏夹</view>
				<view class="favorites-box">
					<view class="f jc-s-b">
						<view class="info-title f ai-c">
							<image src="../../static/info.png"></image>
							我的资料包
						</view>
						<view class="favorites f ai-c" @click="handleCreate">
							<image src="../../static/favorites.png"></image>
							新建收藏夹
						</view>
					</view>
					<scroll-view scroll-y="true" class="favorites-scroll">
						<view class="favorites-list f ai-c" v-for="(item,index) in favoritesList" :key="index">
							<image :src="item.checked?'../../static/select-active.png':'../../static/select.png'" class="select" @click="handleSelect(item,index)"></image>
							<image src="../../static/list-favorites.png"></image>
							<view class="fl-title">{{item.title}}</view>
							<view class="fl-num">{{item.num||0}}篇</view>
						</view>
					</scroll-view>
				</view>
				<view class="btn"><u-button type="primary" text="完成" color="#3366ff" @click="handleCollect"></u-button></view>
			</view>
		</u-popup>
		<CreateFavorites ref="createFavorites" @changeCreateFavorites="getFavorites"/>
	</view>
</template>

<script>
	import {favorites} from '@/api/mine.js'
	import {collectionDatabase} from '@/api/index.js'
	import CreateFavorites from '@/components/CreateFavorites/index.vue'
	export default {
		name: "CopyFavorites",
		components:{
			CreateFavorites
		},
		data() {
			return {
				show: false,
				favoritesList:[],
				materialData:''//资料数据
			};
		},
		methods:{
			//收藏
			async handleCollect(){
				const data=this.favoritesList.find(item=>{
					return item.checked
				})
				if(data){
					await collectionDatabase({
						database_id:this.materialData.id,
						title:this.materialData.title,
						favorites_id:data.id
					})
					uni.showToast({
						title:'收藏成功',
						icon:'none'
					})
					this.show=false
				}else{
					uni.showToast({
						title:'请选择收藏夹',
						icon:'none'
					})
				}
			},
			//选择收藏夹
			handleSelect(data,index){
				this.favoritesList.forEach(item=>{
					item.checked=false
				})
				this.favoritesList[index].checked=!this.favoritesList[index].checked
			},
			//新建收藏夹
			handleCreate(){
				this.$refs.createFavorites.setPopup('add');
			},
			//获取收藏夹
			async getFavorites(){
				const {data}=await favorites({})
				const list=[]
				data.forEach(item=>{
					if(item.type!=2){
						item.checked=false
						list.push(item)
					}
				})
				this.favoritesList=list
			},
			setPopup(data){
				this.materialData=data
				this.getFavorites()
				this.show=true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background: #ecf4fc;
		border-radius: 24rpx 24rpx 0 0;
		padding: 32rpx;
		box-sizing: border-box;
		.btn{
			width: 280rpx;
			margin: 58rpx auto 0 auto;
		}

		.title {
			font-size: 30rpx;
			font-weight: 800;
		}

		.favorites-box {
			width: 100%;
			border-radius: 24rpx;
			border: 1px solid #fff;
			background: #fcfcfe;
			margin-top: 32rpx;
			padding: 24rpx;
			box-sizing: border-box;

			.favorites-scroll {
				max-height: 250rpx;
			}

			.favorites-list {
				padding: 32rpx 0 24rpx 0;
				box-sizing: border-box;

				.select {
					margin-right: 16rpx;
				}

				image {
					width: 35rpx;
					height: 35rpx;
				}

				.fl-title {
					font-size: 30rpx;
					font-weight: 800;
					margin-left: 16rpx;
				}

				.fl-num {
					font-size: 26rpx;
					margin-left: 16rpx;
					color: #9ba3ad;
				}
			}

			.favorites {
				color: #7b828a;
				font-size: 26rpx;

				image {
					width: 35rpx;
					height: 35rpx;
					margin-right: 8rpx;
				}
			}

			.info-title {
				font-size: 28rpx;
				color: #000;

				image {
					width: 35rpx;
					height: 35rpx;
					margin-right: 8rpx;
				}
			}
		}
	}
</style>